<template>
  <h1>搜索</h1>
  <input type="text" v-model="keyWord">&ensp;
  <button @click="submitText">搜索</button>
  <div v-html="msg"></div>
  <div v-if="flag" ref="showText">当我抬头看向天空时，我发现它是那样的蔚蓝，它如此高远而神秘，仿佛不可及。在这个世界上，有许多不可思议的事情，有些人甚至认为它们是神秘的力量在起作用。有时我也会想到这些事情，它们让我感到充满敬畏之情。

在这个世界上，有许多美丽的地方。有些地方被自然风景所包围，如大海、森林和山脉，而另一些地方则被城市的繁华所笼罩。我经常想象自己到世界各地旅行，看看这些不同的地方和人们生活的方式。旅行可以让我们更好地了解不同的文化和风俗，也可以让我们更好地理解这个世界。

人类的文明有着悠久的历史。自从人类开始使用工具以来，我们就一直在不断地发展和进步。我们创造了许多令人惊叹的建筑、科技和艺术作品。但是，我们也面临着许多挑战。我们必须面对气候变化、环境破坏、资源短缺和社会不公等问题。我们需要想出创新的解决方案，以确保我们的未来。

除了这些问题，我们还必须处理个人的问题。每个人都有自己的挑战和难题，无论是健康问题、关系问题还是职业问题。但是，我们必须相信自己，相信自己有足够的力量克服这些问题。我们还必须学会接受自己的弱点和错误，并努力成为更好的人。

生命是一个奇妙的旅程。它充满了喜悦、挑战和惊喜。我们需要学会欣赏生命中的每一刻，无论是好的还是坏的。我们需要学会享受每一天，并珍惜我们所拥有的一切。

最后，我想说的是，我们必须相信自己，相信我们可以改变这个世界。每个人都可以为世界带来正面的影响，无论是在小的还是大的方面。只要我们努力工作，相信自己，并坚持不懈地追求我们的目标，我们就能成为一个更好的人，创造一个更美好的世界。</div>
</template>

<script setup>
import { ref } from 'vue'
let msg = ref('')
let showText = ref(null)
let keyWord = ref('')
let flag = ref(true)
function submitText() {
  let text = showText.value.innerText
  flag.value = false
  msg.value = text.replace(new RegExp(`${keyWord.value}`, 'g'), `<span>${keyWord.value}</span>`)
}
</script>

<style>
span {
  color: red;
}
</style>